import { getDepth } from "../map"
import { CSS2DRenderer, CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";
import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

// 点击标记点显示的弹框
export function createMarkBox(idName, self, size) {
  // 获取并复制元素
  const divMark = document.getElementById(idName).cloneNode(true);
  if (divMark) {
    // 在divMark中查找ID为"name"的div元素
    const divName = divMark.querySelector('#markBox-name');
    divName.textContent = self.name
    const divContent = divMark.querySelector('#markBox-content');
    divContent.textContent = self.content
  }
  divMark.style.display = 'block'
  divMark.style.top = '-124px';
  divMark.style.left = '-100px';
  // HTML元素转化为threejs的CSS2模型对象
  const label = new CSS2DObject(divMark);
  const [x, y] = self.point;
  const { depth } = getDepth(size)
  label.position.x = x
  label.position.set(x, -y, depth * 3);
  label.name = 'markBox'
  return label;
}

// 创建标签
export const createLabel = (point, size, self) => {
  const { depth } = getDepth(size)
  const div = document.createElement("div");
  div.style.color = "#B4EEEA";
  div.style.fontSize = "12px";
  // div.style.textShadow = "1px 1px 2px #047cd6";
  div.textContent = self.name;
  const label = new CSS2DObject(div);
  label.scale.set(0.01, 0.01, 0.01);
  const [x, y] = point;
  label.position.set(x, -y, depth);
  return label;
};

export function createTooltip(self, size) {
  const div = document.createElement("div");
  div.style.color = "#f4ef99";
  div.style.width = "100px";
  div.style.height = "50px";
  div.style.padding = "10px";
  div.style.fontSize = "14px";
  div.style.boxSizing = "border-box";
  div.style.borderRadius = '3px'
  div.style.backgroundColor = '#000000'
  div.style.zIndex = 10
  div.style.boxShadow = '0px 4px 8px rgba(0, 0, 0, 0.3)'
  div.textContent = self.bar.value
  const label = new CSS2DObject(div)
  const [x, y] = self.point;
  const { depth } = getDepth(size)
  label.position.x = x
  label.position.set(x + depth, -(y + depth), depth * 3);
  label.name = 'tooltip'
  return label;
}

export const createNumber = (value) => {
  const div = document.createElement("div");
  div.style.color = "#fff";
  div.style.fontSize = "14px";
  div.style.fontWeight = 700
  div.style.textShadow = "1px 1px 2px #000000";
  div.textContent = value;
  const tag = new CSS2DObject(div)
  return tag;
};
